<template>
  <view class="loading common_bg" v-show="percentLoading">
    <view class="loading__layout">
      <view class="loading__layout_ico"></view>
      <view class="loading__layout__percent">{{ percent }}%</view>
      <view class="loading__layout__theme_txt">即将降落神都藏宝阁</view>
	  <view class="go" v-if="percent===100" @click="handleClick">开始</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      percent: 0,
      percentLoading: true,
    }
  },
  components: {},
  created() {
    const root = {
      route: location.origin + '/static/images/',
    }
    //预加载图片
    this.$utils.preLoadImages({
      list: [
        'btn_start.png',
        'first_txt.png',
        'ico_dot.png',
        'tool__pm01.png?v=1.0',
        'tool__pm02.png',
        'pop_bg.png',
        'over.png',
        'txt1.png',
        'txt2.png',
        'tool__empty.png',
        'bird_01.png',
        'title_01.png',
        'title_02.png',
        'pm_01.png',
        'pm_02.png',
        'close.png',
      ].map((item) => root.route + item),
      perLoad: (o) => {
        this.percent = o
      },
      finish: () => {
        this.$nextTick(function () {
         
          //优化
          this.$utils.preLoadImages({
            list: [
              'bird_02.png',
              'bird_03.png',
              'txt3.png',
              'txt4.png',
              'txt5.png',
              'txt6.png',
              'txt7.png',
              'title_04.png',
              'title_06.png',
              'pm_03.png',
              'pm_04.png',
              'pm_05.png',
              'pm_06.png',
              'pm_07.png',
              'pm_08.png',
              'tool__pm03.png',
              'tool__pm04.png',
              'tool__pm05.png',
              'tool__pm06.png',
              'tool__pm07.png',
              'tool__pm08.png',
              'go_btn.png',
            ].map((item) => root.route + item),
            perLoad: function (o) {},
            finish: function () {},
            perfect: !1,
          })
        })
      },
      perfect: !1,
    })
  },
  methods: {
	  handleClick(){
		  this.percentLoading = false
		  this.$emit('end')
		  this.$emit('playAudio',1)
	  }
  },
}
</script>

<style lang="scss" scoped>
.loading {
  &__layout {
    position: absolute;
    width: 100%;
    left: 0;
    top: 46%;
    text-align: center;
    &_ico {
      left: 0;
      right: 0;
      height: 73rpx;
      overflow: hidden;
      position: absolute;
      margin: auto;
      width: 180rpx;
      top: -100rpx;
      &:before {
        content: '';
        display: block;
        position: absolute;
        left: -108rpx;
        width: 170rpx;
        height: 100%;
        top: 0;
        background-image: url();
        background-repeat: no-repeat;
        background-position: -4rpx 0;
        background-size: auto 100%;
        animation: dec_ico_ani 1.2s steps(3) infinite forwards;
      }
    }
    &__percent {
      font-size: 29rpx;
      color: #171b1c;
      font-family: 'hkwwt';
    }

    &__theme_txt {
      width: 100%;
      height: 9rpx;
      font-size: 30rpx;
      color: #171b1c;
      font-family: 'hkwwt';
      animation: float 1s linear infinite alternate;
      margin-top: 35rpx;
    }
  }
  
  .go{
	font-size: 40rpx;
	color: #fff;
	background-color: rgba(228,178,11,.75);
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	border-radius:8rpx;
	margin:100rpx auto;
  }

  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  background-position: top 50%;
  background-size: 100% auto;
  position: absolute;
}
</style>
